<template>
    <div id="Index">
        <Tables @add="add" 
        @dele="dele"  
        @stop="stop" 
        @edit="edit"
        :tables='tables'
        :select_list="select_list" 
        @submits="submits" 
        :formList="formList"
        :isEdit="isEdit"
        />
      <!-- <Dialog >
          <div class="mask_head">
              <span class="mask_head_title">编辑</span>
              <span class="mask_head_btn"  @click="flag=false">x</span>
            </div>
            <div class="mask_body">
              <div class="body_item">
                  <label>姓名</label>
                  <input type="text" v-model="formList.name">
              </div>
              <div class="body_items">
                <label>班级</label>
                  <select  id="gred" v-model="formList.class_id">
                    <option v-for="(item,index) in select_list" :value="item.id" :key="index">
                      {{item.classlis}}
                    </option>
                </select>
              </div>
              <div class="mask_foot">
                  <button class="btn2" @click="flag=false">取消</button>
                  <button class="btn1" @click="submit()">提交</button>
              </div>
              
            </div>
      </Dialog> -->


    </div>
</template>
<script>
import Tables from './Tables.vue';
// import Dialog from './Dialog.vue';

export default {
    name:"Index",
    // 注冊事件
     components:{
        Tables,
        // Dialog,
    },
    //数据
    data(){
        return{
          // 给传的变量一个初始值
          formList:{
              name:null,
              class_id:null,
              id:Date.now(),
          },
          isEdit:false,
          tables:[
              {
                  id:1,
                  name:'艾斯',
                  class_id:1,
                  dels:false
              },
              {
                  id:2,
                  name:'索隆',
                  class_id:2,
                  dels:false
              },
              {
                  id:3,
                  name:'路飞',
                  class_id:3,
                  dels:false
              },
          ],
          select_list: [
          {
            id: 1,
            classlis: "1班",
          },
          {
            id: 2,
            classlis: "2班",
          },
          {
            id: 3,
            classlis: "3班",
          },
          ],
      }
    },

    // 方法
    methods:{
        //添加
        add(id,name,class_id){
            console.log(id,name,class_id);
                // 必填判断
                if(!name||!class_id) return alert('请填写全部内容!');
                let a = confirm('是否添加');
                if(a){
                    this.tables.unshift({
                        id,
                        name,
                        class_id,
                    });
                }
        },
        //提交
    submits(id,name,class_id) {
      console.log(id,name,class_id);
      const  sure = confirm("确认编辑？");
        if (sure) {
          const index = this.tables.findIndex((item) => item.id === id);
          console.log(index);
          this.tables[index].name = name;
          this.tables[index].class_id = class_id;
        }
    },
   
    //删除
    dele(id) {
        console.log(id);
      const sure = confirm("是否删除?");
      if (sure) {
        this.tables.splice(id, 1);
      }
    },
    //編輯
    edit(item){
      console.log(item.name);
        this.formList.name = item.name;
        this.formList.class_id = item.class_id;
    },
    //毕业
    stop(id) {
      const sure = confirm("是否毕业?");
      if (sure) {
        const index = this.tables.findIndex((item) => item.id === id);
        this.tables[index].dels = true;
      }
    },
    }
}
</script>
<style scoped>
 .mask_head{
  padding: 20px 20px 10px;
}
.mask_head_title{
    line-height: 24px;
    font-size: 18px;
    color: #303133;
}
.mask_head_btn{
  position: absolute;
    top: 20px;
    right: 20px;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 16px;
}
.mask_body{
  padding: 30px 20px;
    color: #606266;
    margin-left: 50px;
    font-size: 14px;
    word-break: break-all;
}
.body_item{
      margin-bottom: 22px;
}

input,#gred{
    margin: 5px;
    text-indent: 5px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dce0e6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    width: 80%;
    cursor: pointer;
}
input:hover{
   border: 1px solid rgb(196, 194, 199);
}
#gred:hover{
  border: 1px solid rgb(196, 194, 199);
}
.btn1,.btn2{
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    text-align: center;
    box-sizing: border-box;
    margin-left: 10px;
    font-weight: 500;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 4px;
}
.btn1{
  color: #fff;
  background-color: rgb(32, 174, 240);
}
.mask .mask_foot{
  text-align: right;
     margin-top: 40px;
}
</style>